<template>
  <div class="loginbox">
    <el-row justify="center">
      <el-col :span="6">
        <h2 class="title">农田小管家app管理系统</h2>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-col :span="6">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item>
            <el-input placeholder="请输入用户名" v-model="form.username" />
          </el-form-item>
          <el-form-item >
            <el-input placeholder="请输入密码" type="password" v-model="form.password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="bthlogin" @click="onSubmit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElNotification } from "element-plus";
import {useRouter} from 'vue-router';
const router =useRouter();
const form = ref({
  username: "",
  password: "",
});
const onSubmit = () => {
    //将登录的用户名存到session里面
    window.sessionStorage.setItem("admininfo",form.value.username)
  //实现登录逻辑：用户名：admin 密码：123
  if (form.value.username == "admin" && form.value.password == "123") {
    //登录成功
    //跳转到首页
    router.push({ path: "/home" });
    ElNotification({
      title: "提示",
      message: "登录成功",
      type: "success",
    });
  }else{
    ElNotification({
      title: "提示",
      message: "用户名或密码错误！",
      type: "error",
    });
  }
};
</script>

<style scoped>
.loginbox {
  width: 100%;
  height: 100vh;
  background: #2d3a4b;
}
.title {
  margin-top: 200px;
  color: #fff;
  margin-bottom: 50px;
  text-align: center;
}
.bthlogin {
  width: 100%;
}
</style>